<template>
  <div class="home flex-[1] p-[15px] flex flex-col gap-[24px]">
    <div class="welcome">
      <h2>早安，{{ userStore.userInfo.name }}老师！</h2>
      <p class="text-gray-600">今天是 {{ formatDate(new Date()) }}，新的一天，加油！</p>
    </div>

    <div class="grid grid-cols-4 gap-[24px]">
      <el-card class="stat-card">
        <div class="icon">👶</div>
        <div class="label">在园人数</div>
        <div class="value">127</div>
      </el-card>

      <el-card class="stat-card">
        <div class="icon">✉️</div>
        <div class="label">请假人数</div>
        <div class="value text-red-500">8</div>
      </el-card>

      <el-card class="stat-card">
        <div class="icon">📢</div>
        <div class="label">未读公告</div>
        <div class="value text-orange-500">2</div>
      </el-card>

      <el-card class="stat-card">
        <div class="icon">🍱</div>
        <div class="label">今日食谱</div>
        <div class="value text-green-600">已发布</div>
      </el-card>
    </div>

    <!-- 快捷入口 -->
    <div class="quick-actions grid grid-cols-5 gap-[16px]">
      <el-card class="quick-btn" @click="router.push('/family/childInfo')"> 👶 学生管理 </el-card>
      <el-card class="quick-btn" @click="router.push('/platfrom/announcement')">
        📢 发布公告
      </el-card>
      <el-card class="quick-btn" @click="router.push('/platfrom/dish')"> 🍱 每日菜谱 </el-card>
      <el-card class="quick-btn" @click="router.push('/student/payment')"> 💰 缴费提醒 </el-card>
      <el-card class="quick-btn" @click="router.push('/family/childRest')"> ✉️ 请假审批 </el-card>
    </div>

    <!-- 最新动态 -->
    <el-card class="card-light p-[16px]">
      <div class="flex justify-between items-center mb-[8px]">
        <b class="text-[16px] flex items-center gap-1"> 🔔 最新动态 </b>
      </div>
      <div class="text-[14px] text-gray-700 space-y-2">
        <div>08:35 李明轩家长提交请假申请，已通过</div>
        <div class="text-red-600">⚠️ 小一班：张三、李四未确认餐费</div>
        <div>今日午餐含虾仁，已提醒过敏儿童家长</div>
        <div>本周五将举行万圣节活动，请准备服装</div>
      </div>
    </el-card>

    <el-card class="tip-card p-[16px]">
      <div class="flex items-center gap-[12px]">
        <span class="text-[20px]">💡</span>
        <span class="text-[14px]">
          <b>小贴士：</b>每周五可提前发布下周菜谱，方便家长安排家庭饮食。
        </span>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();

// 格式化日期
const formatDate = (date: Date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][
    date.getDay()
  ];
  return `${year}年${month}月${day}日 ${week}`;
};
</script>

<style lang="scss" scoped>
.home {
  --primary: #006400;
  --primary-light: #e8f5e8;
  --text-light: #333;

  .welcome {
    h2 {
      color: var(--primary);
      margin: 0;
      font-size: 20px;
    }
    p {
      margin: 4px 0 0;
      font-size: 14px;
    }
  }

  .stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s;
    border-left: 4px solid var(--primary);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 100, 0, 0.12);
    }

    .icon {
      font-size: 24px;
      margin-bottom: 8px;
    }
    .label {
      font-size: 14px;
      color: #666;
    }
    .value {
      font-size: 24px;
      font-weight: bold;
      color: var(--primary);
      margin-top: 8px;
    }
  }

  .quick-btn {
    background: white;
    border-radius: 12px;
    padding: 16px 0;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    &:hover {
      color: var(--primary);
      border: 1px solid var(--primary);
      transform: translateY(-1px);
    }
  }

  .card-light {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.08);
    border-top: 3px solid var(--primary);
  }

  .tip-card {
    background: var(--primary-light);
    border-radius: 12px;
    color: var(--text-light);
    border: 1px dashed #006400;
  }
}
</style>
